// 遗漏分析、冷热分析
<template>
    <div>
       <div class="omission-tools-Box flex flex-align-center">
             <div class="sjfxBox">
               <p class="boxtitle">分析数据</p>
                <div class="boxinput flex flex-align-center">
                    <p>统计</p>
                    <input type="text" placeholder="30" v-model="titleData" @blur="changeTitledata">
                    <p>期</p>
                </div>
            </div>
            <div class="sjfxBox select-class">
               <p class="boxtitle">分析排序</p>
                <div class="boxinput selectBox flex flex-align-center">
                    <img class="select-img" src="@/assets/img/indexchart/lengrefenxi.png" alt="">
                    <select @change="onChangeFenx" v-if="$route.params.chartType == 'ylfx'">
                        <option value="1">按号码排序</option>
                        <option value="2">按遗漏排序</option>
                    </select>
                     <select @change="onChangeFenx" v-if="$route.params.chartType == 'lrfx'">
                        <option value="1">按冷热排序</option>
                        <option value="2">按号码排序</option>
                    </select>
                </div>
            </div>
            <div class="sjfxBox select-class select-btn">
               <p class="boxtitle">图形显示</p>
                <div class="boxinput selectBox flex flex-align-center">
                    <img class="select-img chartimg" :src='isChartChange==1?pieImg:barImg' alt="">
                    <select @change="onchangeChart">
                        <option value="2">柱形图</option>
                        <option value="1">饼形图</option>
                    </select>
                </div>
            </div>
            <div class="sjfxBox select-class">
               <p class="boxtitle">其它操作</p>
                <div class="boxinput selectBox flex flex-align-center" @click="onPreservationFun">
                    <img class="select-img chartimg" src='@/assets/img/indexchart/baocun.png' alt="">
                    <p class="baocun" v-if="$route.params.chartType == 'ylfx'">保存遗漏分析数据</p>
                    <p class="baocun" v-if="$route.params.chartType == 'lrfx'">保存冷热分析数据</p>
                </div>
            </div>
       </div>
       <!-- 饼状图/柱状图 截屏区域 -->
       <div id='chartBody'>
           <div class="pie-class" v-if='isUnSelected'>
                <PieChart :titleText='titleText' :yAxisData='yAxisData_pie' v-if='isChartChange == 1'></PieChart>
                <BarChart :titleText='titleText' :yAxisData='yAxisData' :xAxisData='xAxisData' v-if='isChartChange == 2'></BarChart>
           </div>
           <!-- 图表下方数据提示区域 -->
           <div class="TipsToolsBox" v-if="isUnSelected && $route.params.chartType == 'ylfx'">
               <p class="dateBox">统计数据：从 {{this.hotStartdata}} 期至 {{this.hotEnddata}} 期</p>
               <p class="yilouclass">平均遗漏：{{this.Average}}</p>
               <p class="yilouxq">遗漏详情：
                   <span v-for="(item,index) in yAxisData" :key="index">
                       {{item.name}}:{{item.value}}
                   </span>
               </p>
           </div>
            <UnSelected v-if='!isUnSelected'></UnSelected>
           <div class="TipsToolsBox" v-if="isUnSelected && $route.params.chartType == 'lrfx'">
               <p class="dateBox">统计数据：从 {{this.hotStartdata}} 期至 {{this.hotEnddata}} 期</p>
               <p class="yilouclass">出次详情：
                   <span v-for="(item,index) in yAxisData" :key="index">
                       {{item.name}}:{{item.value}}
                   </span>
               </p>
               <p class="yilouxq">冷热排序：{{sort_key}}</p>
           </div>
       </div>
    </div>
</template>
<script>
import html2canvas from '@/assets/js/html2canvas'
import PieChart from '../PieChart'
import BarChart from '../BarChart'
import UnSelected from './unselected'
export default {
    components: {
        PieChart,
        BarChart,
        UnSelected
    },
    data () {
        return {
            hotStartdata:'',
            hotEnddata:'',
            titleData:30,  //统计期数
            isUnSelected:true, //是否勾选筛选条件  未勾选未false
            isChartChange:2, //选择图表类型
            isChangeFenx:1, //选择分析类型 2为冷热排序；1为遗漏排序
            pieImg:'static/img/indexchart/bingzt.png',
            barImg:'static/img/indexchart/zexiant.png',
            titleText: "",
            analysisTabs:[], //分析select选项；
            yAxisData: [], //柱状图数据
            yAxisData_pie:[], // 饼状图数据
            xAxisData:[],
            Average:'',
            str:'',
            chartType:'',
            sort_key:'',
        }
    },
    computed:{
        lottery_id(){
            return this.$store.state.lottery_id;
        },
        moreMenu(){
            return this.$store.state.leftMoreMenu;
        }
    },
    watch: {
        titleData(mews,old){
            if(30<=mews && mews<=100){
                this.ChangeTavname();
            }
        },
        moreMenu(){
            this.ChangeTavname();
        }
    },
    mounted () { //组件挂载时 根据不同分析类型 请求不同数据
       this.ChangeTavname();
    },
    methods: {
       changeTitledata(){
            if(this.titleData>100||this.titleData<30){
                this.titleData= 30
            }
       },
       ChangeTavname(){
           this.isUnSelected = true;
           let chartType = this. $route.params.chartType;
            if(chartType == 'lrfx'){ //冷热分析
                    this.getColdHeatData();
            }else if(chartType == 'ylfx'){ //遗漏分析
                    this.getAnalysisData();
            }
       },
       getColdHeatData(){
           this.str = this.$store.state.leftMoreMenu.toString();
           if(this.str != ''){
            var params={
                lottery_id:this.lottery_id,
                limit:this.titleData,
                play_bit:this.str,
                order:this.isChangeFenx
            }
            this.https("Analyse/getClientColdHeatTrendChartLimit",params).then(data=>{
                this.xAxisData=[];
                this.yAxisData_pie=[]; //饼状图数据
                this.yAxisData=data.data;
                for(let i in data.data){
                   this.xAxisData.push(data.data[i].name);
                   data.data[i].name = data.data[i].name.toString();
                   data.data[i].value = data.data[i].value.toString();
                   let list = {name:data.data[i].name,value:data.data[i].value};
                   this.yAxisData_pie.push(list);
                 }
                this.hotStartdata=data.end_period;
                this.hotEnddata=data.start_period;
                this.str=this.moreMenu.join('-')
                this.titleText=this.str+'冷热分析';
                this.sort_key = data.sort_key;
            })
           }else{
               this.isUnSelected = false;
           }
       },
       getAnalysisData(){
            this.str = this.$store.state.leftMoreMenu.toString();
            if(this.str != ''){
                var params={
                    lottery_id:this.$store.state.lottery_id,
                    limit:this.titleData,
                    play_bit:this.str,
                    order:this.isChangeFenx
                }
                this.https("Analyse/getClientOmissionAnalysisTrendChartLimit",params).then(data=>{
                    this.xAxisData=[];
                    this.yAxisData_pie=[]; //饼状图数据
                    this.Average=data.average_num.toFixed(2);
                    this.yAxisData=data.data; //柱状图
                    for(let i in data.data){
                        this.xAxisData.push(data.data[i].name);
                        data.data[i].name = data.data[i].name.toString();
                        data.data[i].value = data.data[i].value.toString();
                        let list = {name:data.data[i].name,value:data.data[i].value};
                        this.yAxisData_pie.push(list);
                    }
                    this.hotStartdata=data.end_period;
                    this.hotEnddata=data.start_period;
                    this.str=this.moreMenu.join('-')
                    this.titleText=this.str+'遗漏分析';
                })
            }else{
                this.isUnSelected = false;
            }
       },
       onPreservationFun(){ //html2image 并保存到本地
            var _self = this;
            if(_self.isUnSelected){
            let content_html = document.getElementById('chartBody');　　　　//要转化的div
            let width = content_html.offsetWidth*1.2;
            let height = content_html.offsetHeight*2;
            let offsetTop = content_html.offsetTop;
            let canvas = document.createElement("canvas");
            let context = canvas.getContext('2d');
            let scaleBy = Math.ceil(window.devicePixelRatio);
            canvas.width = width*scaleBy;
            canvas.height = (height+offsetTop)*scaleBy;
            context.scale(scaleBy,scaleBy);
            var opts = {
            allowTaint:true,//允许加载跨域的图片
            tainttest:true, //检测每张图片都已经加载完成
            scale:scaleBy, // 添加的scale 参数
            canvas:canvas, //自定义 canvas
            logging: false, //日志开关，发布的时候记得改成false
            width:width, //dom 原始宽度
            height:height //dom 原始高度
            };
            html2canvas(content_html,opts).then(function (canvas) {
            canvas.style.width = width+"px";
            canvas.style.height = height+"px";
            var image = new Image();
            var type = 'png';
            var imgData = canvas.toDataURL(type);
            imgData = imgData.replace(_self.fixType(type),'image/octet-stream');
            // 下载后的图片名
            var filename = _self.titleText + '.' + type;
            // download
            _self.saveFile(imgData,filename);
            });
         }
       }, 
       fixType(type){  //处理生成图片
           type = type.toLowerCase().replace(/jpg/i, 'jpeg');
           var r = type.match(/png|jpeg|bmp|gif/)[0];
            return 'image/' + r;
       },
       saveFile(data, filename){ //保存图片
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;
            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
       },
        onchangeChart(ele){ //图表切换
            this.isChartChange = ele.target.value;
        },
        onChangeFenx(ele){ //分析类型切换 请求更新数据
             this.isChangeFenx = ele.target.value;
             let chartType = this. $route.params.chartType;
             if(chartType == 'lrfx'){ //冷热分析
                if(this.isChangeFenx == 1){ //按号码排序
                    this.getColdHeatData();
                }else if(this.isChangeFenx == 2){ //按冷热排序或冷热
                    this.getColdHeatData();
                }
             }else if(chartType == 'ylfx'){ //遗漏分析
                if(this.isChangeFenx == 1){ //按号码排序
                    this.getAnalysisData();
                }else if(this.isChangeFenx == 2){ //按冷热排序或冷热
                    this.getAnalysisData();
                }
             }
          
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/indexchart/omissioncont.less);
</style>



